<template style="container-type:inline-size">
  <div class="father-box">
    <main class="resume">
      <section class="resume-header">
        <div class="line-container basic">
          <h1>林煜</h1>
          <h2>求职意向：前端工程师</h2>
        </div>
        <div class="line-container contact">
          <p>年龄：21 </p>
          <p>177-5776-0085</p>
          <p>1101415804@qq.com</p>
        </div>
        <div class="resume-photo">
          <img src="/public/白底证件照.png" alt="">
        </div>
      </section>

      <section class="resume-content">

        <div class="resume-section">
          <h2>教育背景<span></span>EDUCATION</h2>
          <div class="timeline-item">
            <div class="timeline-header">
              <span class="timeline-period">2022.09 - 至今</span>
              <span class="timeline-title">西南大学·软件工程<span style="margin-left: 5cqw;">成绩排名：前10%</span></span>
            </div>

            <div class="timeline-content">
              <ul class="course-list">
                <li>高等数学(95)</li>
                <li>软件需求工程(98)</li>
                <li>数据结构与算法(93)</li>
                <li>前端框架技术实践(93)</li>
                <li>软件测试(91)</li>
                <li>企业级开源框架(91)</li>
                <li>信息安全原理与应用(91)</li>
                <li>移动应用软件开发技术(91)</li>
                <li>数据库原理及应用(90)</li>
                <li>系统分析与设计(90)</li>
                <li>云服务应用开发与迁移(88)</li>
                <li>微服务与分布式架构(88)</li>
                <li>计算机网络(88)</li>
              </ul>

            </div>

          </div>
        </div>


        <div class="resume-section">
          <h2>获奖经历<span></span>AWARDS</h2>
          <ul class="xxx-list">
            <ul class="scholarship">
              <span>奖学金</span>
              <li>
                <span class="award-name">国家奖学金</span>
                <span class="award-date">2023-12</span>
              </li>
              <li>
                <span class="award-name">校二等奖学金</span>
                <span class="award-date">2024-11</span>
              </li>
            </ul>

            <ul class="title">
              <span>荣誉称号</span>
              <li>
                <span class="award-name">西南大学三好学生</span>
                <span class="award-date">2024-10</span>
              </li>
              <li>
                <span class="award-name">优秀共青团员</span>
                <span class="award-date">2024-04</span>
              </li>
              <li>
                <span class="award-name">西南大学学习优秀奖</span>
                <span class="award-date">2023-10</span>
              </li>
              <li>
                <span class="award-name">宣传部优秀干事</span>
                <span class="award-date">2023-06</span>
              </li>
            </ul>


          </ul>
        </div>

        <div class="resume-section">
          <h2>项目经历<span></span>EXPERIENCE</h2>
          <div class="timeline-item">
            <div class="timeline-header">
              <span class="timeline-period">2025.03 - 2025.05</span>
              <span class="timeline-title">搭搭子(社交小程序) <span>· Uni-app + Axois + uni-ui </span></span>
            </div>
            <div class="timeline-content">
              <ul>
                <li>拥有完善的社交平台功能如发布浏览等，集成地图API实现定位服务</li>
                <li>数据加载和上传均以异步请求结合进度提示，优化用户体验</li>
                <li>封装Axios请求层，统一处理HTTP拦截与错误，提升接口复用率</li>
                <li>基于WebSocket实现实时消息推送，支持用户即时通讯</li>
                <li>前后端分离架构，静态资源托管云存储，数据库索引优化查询性能</li>
              </ul>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-header">
              <span class="timeline-period">2025.02 - 2025.03</span>
              <span class="timeline-title">简历生成器(h5) <span>· Vue3 + Pinia + Element Plus</span></span>
            </div>
            <div class="timeline-content">
              <ul>
                <li>负责核心功能开发，包括分步表单、实时预览、PDF导出等</li>
                <li>用户信息设计为模块化管理，支持基本信息、教育背景、工作经历等模块</li>
                <li>支持自定义字体大小，有多种简历模板供选择</li>
                <li>使用html2canvas+jspdf实现简历PDF导出功能，基于localforage实现草稿保存与加载功能</li>
              </ul>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-header">
              <span class="timeline-period">2024.12 - 2025.02</span>
              <span class="timeline-title">个人网站(h5) <span>· Vite + Vue Router + Axios</span></span>
            </div>
            <div class="timeline-content">
              <ul>
                <li>运用Vue Router动态路由加载详情页</li>
                <li>通过Axios异步加载Gitee仓库数据，并实现链接一键跳转项目</li>
                <li>采用响应式设计，以弹性布局实现移动端的适配</li>
                <li>卡片、按钮等界面元素添加渐变、悬浮以及动画等效果，优化视觉体验</li>

              </ul>
            </div>
          </div>
        </div>

        <div class="resume-section">
          <h2>专业技能<span></span>SKILLS</h2>
          <ul class="xxx-list">
            <ul class="frontend">
              <span>前端技术</span>
              <li>
                <span>HTML5</span>
                <span>掌握</span>
              </li>
              <li>
                <span>CSS3</span>
                <span>掌握</span>
              </li>
              <li>
                <span>JavaScript (ES6+)</span>
                <span>掌握</span>
              </li>
              <li>
                <span>Vue3</span>
                <span>掌握</span>
              </li>
              <li>
                <span>Git</span>
                <span>掌握</span>
              </li>
            </ul>
            <ul class="afterend">
              <span>后端技术</span>
              <ul>
                <li>
                  <span>C/C++</span>
                  <span>掌握</span>
                </li>
                <li>
                  <span>Java</span>
                  <span>一般</span>
                </li>
                <li>
                  <span>MySQL</span>
                  <span>一般</span>
                </li>
                <li>
                  <span>Node.js</span>
                  <span>一般</span>
                </li>
              </ul>
              <div style="font-size: 1.6cqw;font-weight: 600;
              position: relative;bottom: 2.8cqw;right: -4cqw;
                margin-bottom: 0.3cqw;">其他技能</div>
              <div style="font-size: 1.6cqw;
                padding: 0 1cqw;position: relative;
                right: 1.5cqw; margin-bottom: 0.3cqw;">CET4/6</div>
              
            </ul>
            
          </ul>
        </div>

        <div class="resume-section">
          <h2>在校经历<span></span>CAMPUS</h2>
          <div class="timeline">
            <div class="timeline-item">
              <div class="timeline-header">
                <span class="timeline-period">2022-10 - 2024-06</span>
                <span class="timeline-title">西南大学学生就业服务团·宣传部干事</span>
              </div>
              <div class="timeline-content">
                <ul>
                  <li>于2023年获评"优秀干事"，收到企业领导及部长多次表彰</li>
                  <li>为团队官方账号拍摄制作宣传视频，协助举办动员大会等活动</li>
                  <li>在双选会中完成百余家企业展位指引布置，协助维护企业代表与学生的对接秩序</li>
                  <li>团部晚会中统筹节目设计、舞台动线规划及设备调试，负责节目彩排流程跟进</li>
                </ul>
              </div>
            </div>
            <div class="timeline-item">
              <div class="timeline-header">
                <span class="timeline-period">2022-10 - 2023-07</span>
                <span class="timeline-title">西南大学计信院团委学生会·文艺部干事</span>
              </div>
              <div class="timeline-content">
                <ul>
                  <li>参与大型院级晚会，负责策划案撰写、节目海选评审，协调完成演出联排</li>
                  <li>在多个院级活动中设计活动流程，统筹物资准备与场地布</li>
                  <li>担任干事期间参加的活动工作涉及到全院以及部分其他学院学生近千余名，多次接收到领导及参与人员的好评</li>
                </ul>
              </div>
            </div>
          </div>
        </div>



      </section>
    </main>

  </div>
</template>
<style scoped>
* {
  text-align: left;
  font-weight: normal;
}

.resume {
  background-color: white;
  height: auto;
  border: 3.5cqw solid rgb(240, 240, 240);
  background-clip: content-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.resume-header {
  height: 16cqw;
  width: 86cqw;
  background-color: #2E75B6;
  color: white;
  line-height: 5cqw;
  position: relative;
  margin-top: 4cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.resume-photo {
  position: absolute;
  right: 6cqw;
  top: -2cqw;
  height: 20cqw;
  width: auto;
  aspect-ratio: 5/7;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  justify-content: center;

  img {
    height: 20cqw;
    object-fit: cover;
  }
}

.resume-header::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: .8cqw solid transparent;
  border-bottom: .8cqw solid transparent;
  border-top: .8cqw solid #0f4a6e;
  border-right: .8cqw solid #0f4a6e;
  top: 16cqw;
}

.resume-header::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  right: 0cqw;
  top: 16cqw;
  border-right: .8cqw solid transparent;
  border-bottom: .8cqw solid transparent;
  border-top: .8cqw solid #0f4a6e;
  border-left: .8cqw solid #0f4a6e;
}

.line-container {
  display: flex;
  align-items: center;
  margin-left: 6cqw;

  h1 {
    font-size: 4cqw;
    font-weight: 800;
    margin: 0;
    margin-right: 8cqw;
  }

  h2 {
    font-size: 2.25cqw;
  }

  p {
    margin: 0;
    font-size: 1.75cqw;
    margin-right: 4cqw;
  }
}

.resume-section {
  margin: 4cqw 3cqw;

  /* border: 1px solid #b5b5b5; */
  h2 {
    font-size: 2cqw;
    font-weight: 800;
    color: #2E75B6;
    margin-bottom: 1.2cqw;
    padding-bottom: .8cqw;
    border-bottom: 2px solid #67a7e3;

    span {
      padding: 3cqw;
    }
  }
}

/* 数据项 */
.timeline-item {
  max-width: 100cqw;
}

.timeline-header {
  display: flex;
  margin-bottom: .5cqw;

  span {
    font-size: 1.8cqw;
    font-weight: 800;
  }

  .timeline-period {
    width: 20cqw;
    margin-right: 5cqw;
  }

  .timeline-title {
    span {
      font-weight: 500;
    }
  }
}

.timeline-content {
  font-size: 1.7cqw;
  font-weight: 600;
  margin-bottom: 1cqw;
}

.timeline-content ul {
  list-style: none;
  padding: 0;

  li {
    padding-left: 2cqw;
    margin-bottom: .3cqw;
    position: relative;
  }
}

.timeline-content li::before {
  content: '•';
  color: #2E75B6;
  position: absolute;
  left: 0;
}



/* 教育部分 */

.course-list {
  display: inline-block;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center; */
  /* align-items:end; */
  /* margin-left: 2cqw; */
}

.course-list li {
  font-size: 1.6cqw;
  margin: 0 1cqw;
  padding: 0;
  margin: 0;
}

.course-list li::before {
  content: '';
}

.course-list::before {
  content: '专业课程:';
  font-size: 1.7cqw;
  position: relative;
  top: -.1cqw;
  /* left: -1cqw; */
}

/* 奖项 */
.xxx-list {
  list-style: none;
  padding: 0;

  ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: .5cqw;
    padding: 0;

    li {
      font-size: 1.6cqw;
      padding: 0 1cqw;
      margin-bottom: 0.3cqw;

      span:nth-child(1) {
        padding-right: .5cqw;
      }

      span:nth-child(2) {
        background: #acd7ff;
        color: white;
        font-size: 1cqw;
        font-weight: 500;
        padding: 0.1cqw 0.5cqw;
        border-radius: .5cqw;
        float: right;
      }
    }
  }

  ul>span {
    font-size: 1.6cqw;
    font-weight: 800;
    width: 100%;
    margin-bottom: 0.5cqw;
  }
}




/* @media (max-width: 768px) {
  .timeline-header {
    flex-direction: column;
    gap: 0.25rem;
  }

  .skills-grid {
    grid-template-columns: 1fr;
  }
} */

.personal-info {
  text-align: center;
  margin-top: 1rem;
}

.personal-info h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.personal-info p {
  color: var(--text-light);
  margin-bottom: 0.5rem;
}

.btns button {
  background: #2E75B6;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btns button:hover {
  background: #1a4d80;
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
